import React, { useEffect, useRef, useState } from "react";

import {
  Dimensions,
  Image, NativeModules,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet, Text,
  TouchableOpacity,
  View,
} from "react-native";
import AntDesign from "react-native-vector-icons/AntDesign";
import Entypo from "react-native-vector-icons/Entypo";
import Colors from "../../util/Colors";
import Toast from "react-native-easy-toast";
import EvilIcons from "react-native-vector-icons/EvilIcons";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import { login163Status } from "../../request/neteaseRequest";

export default function(props){
  const [neteaseStatus, setNeteaseStatus] = useState("当前无账号");
  const [qqStatus, setqqStatus] = useState("当前无账号");


  function getQQ(){
    NativeModules.ToolModule.toQQWindow();
  }
  function getNetease(){
    props.navigation.navigate('LoginNetease')
  }

  function back(){
    props.navigation.pop()
  }
  useEffect(() => {
      asy163ccokie();
      asyQQcookie();
  },[])

  function clearAll(){
    NativeModules.ToolModule.clearSp().then((r) => {
      //console.log(r);
      setTimeout(() => {
        asyQQcookie();
        asy163ccokie();
      },2000)

    })
  }
  async function asy163ccokie(){
    await login163Status((r) => {
      if(r !== -1){
        setNeteaseStatus('网易云音乐：目前登录的账号为--'+r);
      }else {
        setNeteaseStatus('当前依然无账号···')
      }
    }).catch((r) => {

    })
  }
  function asyQQcookie(){
    NativeModules.ToolModule.checkQQ().then((r) => {
      //console.log(r);
      r = r.cookie;
      if(r.indexOf(' uin=') !== -1){
        let uin = r.substring(r.indexOf(' uin=') + 5)
        uin = uin.substring(0,uin.indexOf(';'));
        setqqStatus('QQ音乐：目前登录的账号为--'+uin);
      }else if(r.indexOf(';uin=') !== -1) {
        let uin = r.substring(r.indexOf(';uin=') + 5)
        uin = uin.substring(0, uin.indexOf(';'));
        setqqStatus('QQ音乐：目前登录的账号为--' + uin);
      }else {
        setqqStatus('QQ音乐：目前无登录的账号');
      }
    }).catch(() => {

    });
  }
  return(
    <View style={styles.contain}>
      <View style={styles.top}>
        <AntDesign
          name={'arrowleft'}
          size={30}
          style={styles.icon}
          color={'white'}
          onPress={back}
        />
        <View style={styles.layoutText}>
          <Text style={styles.itemTitle} numberOfLines={1}>
            登录详情
          </Text>
        </View>

      </View>
      <TouchableOpacity style={styles.neteBtn} onPress={getNetease}>
      <Text style={styles.itemTitle}>
        登录网易云音乐
      </Text>
        <TouchableOpacity style={styles.fresh} onPress={asy163ccokie}>
          <FontAwesome name={'refresh'} size={35} color={'white'}/>
        </TouchableOpacity>
      </TouchableOpacity>

      <View style={styles.statusContain}>
        <Text style={styles.btnText}>
          {neteaseStatus}
        </Text>
      </View>

      <TouchableOpacity style={styles.neteBtn} onPress={getQQ}>
        <Text style={styles.itemTitle}>
          登录QQ音乐
        </Text>
        <TouchableOpacity style={styles.fresh} onPress={asyQQcookie}>
          <FontAwesome name={'refresh'} size={35} color={'white'}/>
        </TouchableOpacity>
      </TouchableOpacity>
      <View style={styles.statusContain}>
        <Text style={styles.btnText}>
          {qqStatus}
        </Text>
      </View>
      <TouchableOpacity style={styles.neteBtn} onPress={clearAll}>
        <Text style={styles.itemTitle}>
          清除所有缓存
        </Text>
      </TouchableOpacity>
    </View>
  )


}
const screen = Dimensions.get('window');
const width = screen.width;
const height = screen.height;

const styles = StyleSheet.create({
  contain:{
    width:width,
    height:height
  },
  neteBtn:{
    width:width,
    height:45,
    borderWidth:2,
    marginTop:10,
    marginBottom:10,
    flexDirection: 'row',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',
    backgroundColor:Colors.colorPrimary
  },
  top:{

    height:60,
    width:width,
    backgroundColor:Colors.colorPrimary,
    flexDirection: 'row',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',


  },
  icon:{
    flex:1,
    height:30,
    width:30
  },
  layoutText:{
    position:'absolute',

    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',
  },
  itemTitle:{
    color:'white',
    fontSize:16
  },
  btnText:{
    width:width,
    fontSize:20
  },
  fresh:{
    position:"absolute",
    right:10
  },
  statusContain:{
    width:width ,
    height:height / 4,
    backgroundColor:'rgba(105,105,105,0.09)'
  }
});
